<script setup lang="ts">
import { Client } from '@stomp/stompjs'
import SockJS from 'sockjs-client/dist/sockjs.min.js'
import { onBeforeUnmount, onUnmounted, watch, onMounted, ref, reactive, computed } from 'vue';
import { returnHome, flyToPoint } from '#/api/daping/airport'
import { useRouter, useRoute } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus'
import hms from '../../../../../assets/json/hms.json'
// import CompassRing from '../../../../components/instruments/CompassRing.vue';
// import Altimeter from '../../../../components/instruments/Altimeter.vue';
import instruments from '#/components/instruments/instruments.vue'
const props = defineProps({
  deviceData: Object,
  // receivedData: Array
});
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href
}
const router = useRouter()
const socket_url = props.deviceData.wsUrl ? props.deviceData.wsUrl : 'http://fssocket.nbiot.muguasoft.com:7602/api/monitor/ws'
// const socket_url = 'http://192.168.209.23:9900/api/monitor/ws'
// const socket_url = 'http://ws.feisuanuav.com:9900/api/monitor/ws'
let mapcenter, attitudeHead, method: string;
let aircraft = ref({})
const errorMsg = ref('')
const emit = defineEmits(['send-data'])
const sendToSibling = (data) => {
  emit('send-data', data)
}
const sendToSibling2 = () => {
  emit('send-data2', {
    method,
  })
}
const sendToSiblingInfo = (info) => {
  emit('send-info', {
    info
  })
}
const sendToSiblingVideo = (ddd) => {
  // const { zoom_factor, ir_zoom_factor } = ddd
  emit('send-data3', ddd)
}

// let stompUrl = 'ws://' + location.hostname + ':' + location.port + import.meta.env.VITE_STOMP_API
let stompUrl = 'ws://' + socket_url
if (import.meta.env.MODE === 'development' || import.meta.env.MODE === 'test') {
  // stompUrl = import.meta.env.VITE_STOMP_API
}
let _client;
const setConnected = (connected) => {
  console.log(connected)
}
let fly_msg = ref({
  obstacle: 0,
  cameraHeight: 0,
  direction: 0
})
const randomNatural = (min, max, prev = null, step = Infinity) => {
  if (prev === null) return Math.floor(Math.random() * (max - min + 1)) + min;
  const lower = Math.max(min, prev - step);
  const upper = Math.min(max, prev + step);
  return Math.floor(Math.random() * (upper - lower + 1)) + lower;
}
const get_fly_msg = () => {
  setInterval(() => {
    fly_msg.value.obstacle = randomNatural(-50, 50, fly_msg.value.obstacle, 10)
    fly_msg.value.cameraHeight = randomNatural(-50, 50, fly_msg.value.cameraHeight, 10)
    fly_msg.value.direction = randomNatural(-180, 180, fly_msg.value.direction, 10)
  }, 1000);
}
const instrumentsref = ref({})
onMounted(() => {
  get_fly_msg()
})
let errorMsg_timeOut;
const outputstatus = { "canceled": "取消或终止", "failed": "失败", "in_progress": "执行中", "ok": "执行成功", "partially_done": "部分完成", "paused": "暂停", "rejected": "拒绝", "sent": "已下发", "timeout": "超时" }
const showGreeting = (data) => {
  // if (data.method == 'control') {
  // console.log('socket返回值', data)
  // }
  // console.log(data.data.longitude, data.data.latitude)
  // method = data.method
  // console.log(aircraft)
  if (data.method == 'osd') {
    // method = '飞行中'
    // let e = data.data
    // mapcenter = [e.longitude, e.latitude]
    // console.log(mapcenter)
    // sendToSibling()
  } else if (data.method == 'drc_camera_osd_info_push') {
    // console.log('socket返回值', data)
    sendToSiblingVideo({
      zoom_factor: data.data.zoom_lense.zoom_factor,
      ir_zoom_factor: data.data.ir_lense.ir_zoom_factor
    })
    // method = '飞行中'
    // let e = data.data
    // mapcenter = [e.longitude, e.latitude]
    // console.log(mapcenter)
    // sendToSibling()
  } else if (data.method == 'osd_info_push') {
    // console.log('socket返回值', data)
    // method = '飞行中'
    let e = data.data
    mapcenter = [e.longitude, e.latitude]
    Object.assign(instrumentsref.value, data.data)
    attitudeHead = data.data.attitude_head
    sendToSibling({
      mapcenter,
      attitudeHead,
      type: 'osd_info_push',
      method: 'osd_info_push'
    })
  } else if (data.method == 'speaker_tts_play_start_progress') {
    // console.log('socket返回值', data)
    emit('datatovideoSpeak', data)
  } else if (data.method == 'speaker_audio_play_start_progress') {
    // console.log('socket返回值', data)
    emit('datatovideoSpeak', data)
  } else if (data.method == 'uom_fly_data_info') {
    // method = '飞行中'
    // let e = data.data.output.ext
    // mapcenter = [e.longitude / 10000000, e.latitude / 10000000]
    // console.log(mapcenter)
    // sendToSibling()
  } else if (data.method == 'takeoff_to_point_progress') {
    // console.log('socket返回值', data)
    // 一键起飞结果事件通知
    // {"task_finish":"一键起飞任务完成","task_ready":"准备起飞","wayline_cancel":"取消飞向目标点","wayline_failed":"执行失败","wayline_ok":"执行成功，已飞向目标点","wayline_progress":"执行中"}
    if (data.data.status == 'task_ready') {
      method = '准备起飞';
    } else if (data.data.status == 'wayline_progress') {
      method = '执行一键起飞中（请勿操作）';
    } else if (data.data.status == 'task_finish') {
      method = '一键起飞任务完成';
    } else if (data.data.status == 'wayline_cancel') {
      method = '取消飞向目标点';
    } else if (data.data.status == 'wayline_failed') {
      method = '一键起飞执行失败';
    } else if (data.data.status == 'wayline_ok') {
      method = '一键起飞成功';
    }
    sendToSibling({
      data: data.data,
      type: 'takeoff_to_point_progress',
      method: method,
    })
    // sendToSibling2()
  } else if (data.method == 'fly_to_point_progress') {
    // {"wayline_cancel":"取消飞向目标点","wayline_failed":"执行失败","wayline_ok":"执行成功，已飞向目标点","wayline_progress":"执行中"}	
    if (data.data.status == 'wayline_cancel') {
      method = '取消飞向目标点';
    } else if (data.data.status == 'wayline_failed') {
      method = '指点飞行执行失败';
    } else if (data.data.status == 'wayline_ok') {
      method = '执行成功，已飞向目标点';
    } else if (data.data.status == 'wayline_progress') {
      method = '指点飞行执行中';
    }
    sendToSibling({
      data: data.data,
      type: 'fly_to_point_progress',
      method: method,
    })
  } else if (data.method == 'flighttask_progress') {
    // 上报航线任务进度
    if (data.data.result == 0) {
      // result 0 代表航线正常执行
      method = '航线' + outputstatus[data.data.output.status]; //执行状态
      // if (data.data.output.status == 'partially_done') {
      // method = '航线任务结束'
      // }
    } else {
      method = '航线任务中'
      sendToSibling2()
    }
  } else if (data.method == 'return_home_info') {
    // 返航
    // method = '飞行中'
  } else if (data.method == 'camera_photo_take_progress') {
    // 全景拍照进度返回
    // console.log('camera_photo_take_progress', data.data.output.progress.percent)
    sendToSiblingVideo({
      percent: data.data.output.progress.percent
    })
  } else if (data.method == 'info') {
    Object.assign(aircraft.value, data.data)
    aircraft.value.positionState = JSON.parse(aircraft.value.positionState)
    sendToSiblingInfo(data.data)
    if (data.data.modeCode == 0) {
      ElMessage({
        message: '正在返航',
        grouping: true,
        type: 'primary',
        repeatNum: 0
      })
      router.go(-1);
    }
    // modeCode
    // modeCode == 0 空闲中
    // modeCode == 1 现场调试
    // modeCode == 2 远程调试
    // modeCode == 3 固件升级中
    // modeCode == 4 作业中
    // modeCode == 5 待标定
    // method = '远程控制-手动飞行'
  } else if (data.method == 'hms') {
    method = '待机中'
    let str = '';
    if (data.data.list.length > 0) {
      for (let i of data.data.list) {
        errorMsg.value = hms[i.code].zh;
        // ElMessage.error(hms[i.code].zh);
        ElMessage({
          type: 'error',
          duration: 2000,
          grouping: true,
          message: msg_r(hms[i.code].zh)
        })
        // ElMessage.error(hms[i.code].zh);
        // if (errorMsg_timeOut) clearTimeout(errorMsg_timeOut)
        // errorMsg_timeOut = setTimeout(() => {
        //   errorMsg.value = ''
        // }, 3000);
      }
    }
  }
}
const msg_r = (text: string) => {
  return text.replace(/%component_index/g, '');
}
const generateUniqueId = () => {
  const timestamp = Date.now().toString(36);
  const random = Math.random().toString(36).substring(2);
  return timestamp + random;
}
const userflyid = generateUniqueId()
// if (!localStorage.getItem('userflyid')) {
//   localStorage.setItem('userflyid', generateUniqueId())
// }
// const useStompJsStore = defineStore('StompJs', {
//   state: () => ({
//     _client: null,
//     // 重连后重新订阅
//     listenerSubs: [],
//   }),
//   getters: {
//     stompClient: (state) => state._client,
//   },
//   actions: {
//     // 激活stomp客户端
//     setActivate() {
_client = new Client({
  brokerURL: stompUrl,
  connectHeaders: {},
  // debug: function (str) {
  // console.log('🌐 ~ file: stompjs.js:19 ~ setActivate ~ str:', str)
  // },
  //重连间隔 ms
  reconnectDelay: 5000,
  //发送心跳 ms
  heartbeatIncoming: 1000,
  //接收心跳 ms
  heartbeatOutgoing: 2000,
  // logRawCommunication: false,
})
// 对于SockJS，需要设置一个工厂来创建一个新的SockJS实例
// 用于每次（重新）连接
_client.webSocketFactory = function () {
  // 请注意，URL与WebSocket URL不同
  return new SockJS(socket_url);
};
_client.onConnect = (frame) => {
  // setConnected(true);
  // console.log('Connected: ' + frame);
  //在这里将订阅改成 /topic/+机场的网关，即可收到点对点发送的消息
  _client.subscribe('/topic/' + props.deviceData.gatewaySn, (greeting) => {
    // console.log(greeting.body)
    showGreeting(JSON.parse(greeting.body));
  });
  _client.publish({
    destination: "/app/droneControl",
    body: JSON.stringify({
      "method": 'control',
      "gateway": props.deviceData.gatewaySn,
      "clientId": userflyid,
    })
  });
}
onBeforeUnmount(() => {
  _client.deactivate();
})
_client.onStompError = function (frame) {
  // Will be invoked in case of error encountered at Broker
  // Bad login/passcode typically will cause an error
  // Complaint brokers will set `message` header with a brief message. Body may contain details.
  // Compliant brokers will terminate the connection after any error
  // console.log('🐛Broker reported error: ' + frame.headers['message'])
  // console.log('🐛Additional details: ' + frame.body)
}
_client.activate()
//   },
//   /**
//    *
//    * @param topic 订阅路径
//    * @param callback 订阅回调
//    * @param headers 请求参数
//    * @param isRemoveDup 是否需要移除重复订阅
//    */
//   // 目前还未尝试两个相同订阅，是否会产生前一个订阅数据无法获得的问题
//   sendSubscribe(topic, callback, headers = {}, isRemoveDup = true) {
//     const subs = _client.subscribe(topic, callback, headers)
//     // 此处需要管理重复的订阅
//     if (isRemoveDup) {
//       listenerSubs.push({
//         topic,
//         subs,
//       })
//       console.log('------', subs)
//     }
//   },
//   // 断开stomp客户端
//   async setDeActivate() {
//     await _client.deactivate()
//   },
// },
// })

const keydownf = (data) => {
  const { x, y, h, w, method, cameraType, zoomFactor, pitchSpeed, yawSpeed, locked, x1, y1, width, height, resetMode, videoType, cameraMode } = data
  _client.publish({
    destination: "/app/droneControl",
    body: JSON.stringify({
      "gateway": props.deviceData.gatewaySn, // "8UUXN2800A00HX"
      "x": x ? x : 0, // 手动飞行
      "y": y ? y : 0, // 手动飞行
      "h": h ? h : 0, // 手动飞行
      "w": w ? w : 0, // 手动飞行
      "method": method ? method : 'droneControl',
      "cameraType": cameraType ? cameraType : "", // 设置变焦时需传入类型
      "zoomFactor": zoomFactor ? zoomFactor : 2, // 焦距
      "locked": locked,  // 云台锁定
      "pitchSpeed": pitchSpeed ? pitchSpeed : 0, // 画面拖动
      "yawSpeed": yawSpeed ? yawSpeed : 0, // 画面拖动
      "x1": x1 ? x1 : 0, // 框选变焦
      "y1": y1 ? y1 : 0, // 框选变焦
      "width": width ? width : 0, // 框选变焦
      "height": height ? height : 0, // 框选变焦
      "resetMode": resetMode ? resetMode : 0, // 重置云台类型
      "videoType": videoType ? videoType : '', // 设置直播镜头
      "cameraMode": cameraMode ? cameraMode : '', // 设置拍照模式
    })
  });
}

// 定义有效按键集合
const validKeys = new Set(['q', 'w', 'e', 'a', 's', 'd', 'z', 'c', 'x', ' ']);
const activeKeys = new Set(); // 存储当前按下的有效键
const keyTimers = {}; // 存储各键的定时器ID
const x = ref(false); // X键状态

// 处理按键功能 
const handleKeyPress = (key) => {
  switch (key) {
    // case 'q':
    //   keydownf({ "w": x.value ? -17 : -5 });
    //   break;
    // case 'w':
    //   keydownf({ "x": x.value ? 17 : 5 });
    //   break;
    // case 'e':
    //   keydownf({ "w": x.value ? 20 : 5 });
    //   break;
    // case 'a':
    //   keydownf({ "y": x.value ? -17 : -5 });
    //   break;
    // case 's':
    //   keydownf({ "x": x.value ? -17 : -5 });
    //   break;
    // case 'd':
    //   keydownf({ "y": x.value ? 17 : 5 });
    //   break;
    // case 'z':
    //   keydownf({ "h": x.value ? -4 : -2 });
    //   break;
    // case 'c':
    //   keydownf({ "h": x.value ? 5 : 2 });
    //   break;
    case 'q':
      keydownf({ "w": x.value ? -17 : -4 });
      break;
    case 'w':
      keydownf({ "x": x.value ? 17 : 1 });
      break;
    case 'e':
      keydownf({ "w": x.value ? 20 : 4 });
      break;
    case 'a':
      keydownf({ "y": x.value ? -17 : -1 });
      break;
    case 's':
      keydownf({ "x": x.value ? -17 : -1 });
      break;
    case 'd':
      keydownf({ "y": x.value ? 17 : 1 });
      break;
    case 'z':
      keydownf({ "h": x.value ? -4 : -1 });
      break;
    case 'c':
      keydownf({ "h": x.value ? 5 : 1 });
      break;
    case 'x':
      x.value = !x.value;
      break;
    case ' ':
      keydownf({ "method": 'droneEmergencyStop' });
      break;
  }
};

// 递归触发按键功能
const triggerKeyRecursively = (key) => {
  if (activeKeys.has(key)) {
    handleKeyPress(key);
    keyTimers[key] = setTimeout(() => {
      triggerKeyRecursively(key);
    }, 500); // 每100ms触发一次
  }
};

// 启动键的持续触发
const startKeyTrigger = (key) => {
  if (!keyTimers[key] && activeKeys.has(key)) {
    handleKeyPress(key); // 立即触发一次
    addKeyEffect(key); // 添加效果
    keyTimers[key] = setTimeout(() => {
      triggerKeyRecursively(key);
    }, 500);
  }
};

// 停止键的持续触发
const stopKeyTrigger = (key) => {
  if (keyTimers[key]) {
    clearTimeout(keyTimers[key]);
    delete keyTimers[key];
    removeKeyEffect(key)
  }
};

// 监听键盘按下事件
document.addEventListener('keydown', (event) => {
  const key = event.key.toLowerCase();

  if (validKeys.has(key)) {
    event.preventDefault();

    if (!activeKeys.has(key)) {
      activeKeys.add(key);

      // 非X键和空格键启动持续触发
      if (key !== 'x' && key !== ' ') {
        startKeyTrigger(key);
      } else {
        handleKeyPress(key); // 特殊键只触发一次
        // addKeyEffect(key); // 添加效果
      }
    }
  }
});
// 监听键盘抬起事件
document.addEventListener('keyup', (event) => {
  const key = event.key.toLowerCase();

  if (validKeys.has(key)) {
    activeKeys.delete(key);

    // if (key === 'x') {
    //   x.value = false;
    //   removeKeyEffect(key)
    // }

    // 停止该键的持续触发
    stopKeyTrigger(key);
  }
});
// 添加按键效果
const addKeyEffect = (key) => {
  const element = document.querySelector(`[data-key="${key}"]`) ||
    document.querySelector(`[data-key="${key.toUpperCase()}"]`);
  if (element) {
    element.classList.add('kdown'); // 添加激活样式
  }
};
// 移除按键效果
const removeKeyEffect = (key) => {
  const element = document.querySelector(`[data-key="${key}"]`) ||
    document.querySelector(`[data-key="${key.toUpperCase()}"]`);
  if (element) {
    element.classList.remove('kdown'); // 移除激活样式
  }
};
// 飞行时长
const syfxsc = computed(() => {
  return ((aircraft.value?.capacityPercent ?? 0) * 6) / 10
})
let back_clock = ref(false);
const aircraft_back = () => {
  ElMessageBox.confirm(
    '确认返航？(执行后不能进行其他操作)',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }
  ).then(async () => {
    try {
      back_clock.value = true
      const e = await returnHome({ id: props.deviceData.id })
      if (e.code == 200) {
        router.go(-1)
      } else {
        ElMessage.error(e.msg);
      }
    } catch (err) {
      console.log(err)
      ElMessage.error('加载数据失败');
    }
  }).catch(() => {
  })
}
let now_lnglat;
const sir_this_way = async (ing) => {
  console.log(ing, {
    "longitude": now_lnglat.KL,
    "latitude": now_lnglat.kT,
    "gateway": props.deviceData.gatewaySn
  })
  if (!ing) {
    const e = await flyToPoint({
      "longitude": now_lnglat.KL,
      "latitude": now_lnglat.kT,
      "gateway": props.deviceData.gatewaySn,
      "height": instrumentsref.value.height,
    })
  } else {
    _client.publish({
      destination: "/app/droneControl",
      body: JSON.stringify({
        "gateway": props.deviceData.gatewaySn,
        "longitude": now_lnglat.KL,
        "latitude": now_lnglat.kT,
        "height": instrumentsref.value.height,
        "method": 'flyToPointUpdate',
      })
    });
  }
}
// watch(() => props.receivedData, (newValue, oldValue) => {
//   if (now_lnglat != newValue) now_lnglat = newValue;
//   console.log(now_lnglat)
//   sir_this_way()
// }, { deep: true })
const distancesa = ref()
const childMethod = (param) => {
  let { lnglat, distances, ing } = param
  if (lnglat.KL && lnglat.kT) {
    let newValue = lnglat
    if (now_lnglat != newValue) now_lnglat = newValue;
    sir_this_way(ing)
  }
  if (distances || distances === 0) {
    distancesa.value = distances;
    Object.assign(instrumentsref.value, { targetpoint: distancesa.value })
  }
}
const childMethod2 = (param) => {
  console.log(param)
  keydownf(param)
}
// const button_is_disabled=ref(false)
// 设置按钮禁用状态
const childMethod3 = (working) => {
  // console.log(working)
  // button_is_disabled.value=working
}
const anyFunction = (param) => {
  console.log(param)
  _client.publish({
    destination: "/app/droneControl",
    body: JSON.stringify({
      "gateway": props.deviceData.gatewaySn, // "8UUXN2800A00HX"
      ...param
    })
  });
}
// defineExpose({
//   childMethod,
// })
defineExpose({
  childMethod,
  childMethod2,
  childMethod3,
  anyFunction,
})
</script>
<template>
  <div class="container-box">
    <!-- <div class="header-box">
      <div class="icon-list">
        <div class="icon-list-item" v-for="index in 7" :key="index">
          <img class="icon" :src="getImageUrl(`airportTakeover_icon${index + 1}.png`)" alt="" />
        </div>
      </div>
      <div class="msg_box">
        <div class="scrolling-text-wrapper">
          <div class="scrolling-text">
            {{ errorMsg }}
          </div>
        </div>
      </div>
    </div> -->
    <div class="content-box">
      <div class="content-box-item content-box-item1" style="width: calc(50%);">
        <div class="content-box-item-list-box">
          <div class="content-box-item-list">
            <div class="color-box y-box"></div>
            <div>电池电量</div>
          </div>
          <div class="content-box-item-list" style="margin-bottom: 1vh">
            <div class="box"></div>
            <div style="font-size: 2vh; color: #ffd23a">{{ aircraft?.capacityPercent ?? 0 }}%</div>
          </div>
          <div class="content-box-item-list">
            <div class="color-box b-box"></div>
            <div>剩余飞行时长</div>
          </div>
          <div class="content-box-item-list" style="margin-bottom: 1vh">
            <div class="box"></div>
            <div style="font-size: 2vh; color: #02fdff">约{{ syfxsc }}分钟</div>
          </div>
          <div class="content-box-item-list">
            <div class="color-box r-box"></div>
            <div>搜星质量</div>
          </div>
          <div class="content-box-item-list">
            <div class="box"></div>
            <div style="font-size: 2vh; color: #f95a74">RTK {{ aircraft?.positionState?.rtk_number ?? 0 }}</div>
          </div>
        </div>
        <div class="img-box">
          <!-- <img class="img" src="../../../../../assets/instrument.png" /> -->
          <!-- <Altimeter></Altimeter> -->
          <!-- <CompassRing></CompassRing> -->
          <instruments :instrumentsref="instrumentsref">
          </instruments>
        </div>
      </div>
      <div class="content-box-item" style="width: calc(30%);">
        <div class="keypad-box" v-loading="back_clock">
          <div class="keypad-list">
            <div class="keypad-item" @click="handleKeyPress('q')" data-key="q">
              Q
              <img class="img" src="../../../../../assets/airport-keypad-icon.png" />
            </div>
            <div class="keypad-item" @click="handleKeyPress('w')" data-key="w">
              W
              <img class="img" src="../../../../../assets/airport-keypad-icon1.png" />
            </div>
            <div class="keypad-item" @click="handleKeyPress('e')" data-key="e">
              E
              <img class="img" src="../../../../../assets/airport-keypad-icon2.png" />
            </div>
            <div class="keypad-item" @click="handleKeyPress('c')" data-key="c">
              C
              <img class="img img2" src="../../../../../assets/airport-keypad-icon3.png" />
            </div>
            <div class="keypad-item down" @click="handleKeyPress('a')" data-key="a">
              A
              <img class="img" src="../../../../../assets/airport-keypad-icon4.png" />
            </div>
            <div class="keypad-item down" @click="handleKeyPress('s')" data-key="s">
              S
              <img class="img" src="../../../../../assets/airport-keypad-icon5.png" />
            </div>
            <div class="keypad-item down" @click="handleKeyPress('d')" data-key="d">
              D
              <img class="img" src="../../../../../assets/airport-keypad-icon6.png" />
            </div>
            <div class="keypad-item down" @click="handleKeyPress('z')" data-key="z">
              Z
              <img class="img img2" src="../../../../../assets/airport-keypad-icon7.png" />
            </div>
          </div>
          <div class="keypad-button" @click="handleKeyPress('x')" data-key="x" :class="{ kdown: x }">
            高速
            <img class="img" src="../../../../../assets/airport-keypad-button-icon.png" />
          </div>
        </div>
      </div>
      <div class="content-box-item" style="width: 20%">
        <div class="buttton-list" v-loading="back_clock">
          <!-- <div class="button">飞行设置</div> -->
          <div class="button" @click="aircraft_back">返航</div>
          <!-- <div class="button">一键降落</div> -->
          <div class="button button1" @click="handleKeyPress(' ')">
            急停
            <img class="img" src="../../../../../assets/airport-keypad-button-icon1.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container-box {
  width: 100%;
  height: 100%;

  .header-box {
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;

    .icon-list {
      display: flex;
      align-items: center;
      height: 5vh;
      margin-left: 1vh;

      &-item {
        display: flex;
        align-items: flex-end;
        width: 5vh;
        height: 5vh;
        margin-right: 0.2vh;

        .icon {
          width: 4vh;
          height: 4vh;
        }
      }
    }

    .msg_box {
      padding: 0 2vh;
      font-size: 1.8vh;
      padding-top: 1vh;
      height: 5vh;
      display: flex;
      align-items: center;
      color: #F56C6C;
      overflow: hidden;
      position: relative;

      .scrolling-text-wrapper {
        display: flex;
        flex-direction: column;
        animation: none;
      }

      .scrolling-text {
        white-space: normal;
        word-wrap: break-word;
        flex-shrink: 0;
        font-size: 1.5vh;
      }

      @keyframes scroll {
        0% {
          transform: translateY(0);
          /* 起始位置 */
        }

        100% {
          transform: translateY(calc(-100% + 5vh));
          /* 滚动到内容顶部完全消失 */
        }
      }

      .scrolling-text-wrapper.animate {
        animation: scroll 5s linear infinite;
      }

      /* 暂停动画的交互效果（可选） */
      .scrolling-text:hover {
        animation-play-state: paused;
        /* 鼠标悬停时暂停动画 */
      }
    }
  }

  .content-box {
    display: flex;
    align-items: center;
    height: calc(100%);
    padding: 1vh 0.5vh;


    .content-box-item {
      height: calc(100% - 0.5vh);
      padding: 0.5vh;
      margin: 0 0.5vh;
      background-color: #093033;

      .content-box-item-list-box {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .content-box-item-list {
          display: flex;
          align-items: center;
          font-family: PingFangSC, 'PingFang SC';
          font-weight: 400;
          font-size: 1.5vh;
          color: #fff;
          white-space: nowrap;

          .color-box {
            width: 1vh;
            height: 1vh;
            margin: 0 1vh;
          }

          .y-box {
            background-color: #ffd23a;
          }

          .b-box {
            background-color: #02fdff;
          }

          .r-box {
            background-color: #f95a74;
          }

          .box {
            width: 3vh;
            height: 3vh;
          }
        }
      }

      .img-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        .img {
          width: 100%;
          object-fit: scale-down;
        }
      }

      .keypad-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;

        .keypad-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 16vw;

          .keypad-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2vw;
            height: 2vw;
            margin: 1vh 1vw;
            font-family: Avenir, Avenir;
            font-size: 1vmax;
            font-weight: 500;
            color: #fff;
            background-color: #07484e;

            .img {
              position: absolute;
              bottom: 2.2vmax;
              width: 1vh;
              height: 1vh;
            }

            .img2 {
              height: 1.5vh;
            }
          }

          .kdown {
            background-color: #4d7679;
          }

          .down {
            .img {
              top: 2.2vmax;
              width: 1vh;
              height: 1vh;
            }

            .img2 {
              height: 1.5vh;
            }
          }
        }

        .keypad-button {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 14vw;
          height: 2.5vw;
          margin-top: 2vh;
          font-family: PingFangSC, 'PingFang SC';
          font-size: 1.8vh;
          font-weight: 400;
          color: #fff;
          background-color: #07484e;

          .img {
            position: absolute;
            width: 1.5vmax;
            height: 1.5vmax;
            top: -0.7vmax;
            right: -0.7vmax;
          }
        }

        .kdown {
          background-color: #4d7679;
        }
      }

      .buttton-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 100%;

        .button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 70%;
          height: 4vh;
          font-size: 1.8vh;
          white-space: nowrap;
          background-color: #07484e;
          cursor: pointer;
        }

        .button1 {
          position: relative;
          background-color: #e80603;

          .img {
            position: absolute;
            width: 3vmax;
            height: 1.5vmax;
            top: -0.7vmax;
            right: -1vmax;
          }
        }
      }
    }

    &-item1 {
      display: flex;

    }
  }
}
</style>
